<template>
    <div class="menubar flex-start-row">
        <div class="menuItem" @click="clearData">Clear</div>
        <div class="menuItem" @pointerover="() => { curHover = 'add' }" @pointerleave="() => { curHover = '' }">
            Add
            <div class="menuOptions" :style="{ display: curHover == 'add' ? 'block' : 'none' }">
                <div class="group flex-start-col">
                    <div class="menuOption" @click="addDirectionalLight">DirectionalLight</div>
                    <div class="menuOption" @click="addAmbientLight">AmbientLight</div>
                    <div class="menuOption" @click="addSpotLight">SpotLight</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import * as THREE from "three";
import { ref } from 'vue';
import { editor } from '@/store';

let curHover = ref<string>('');

function clearData() {
    if (confirm('Any unsaved data will be lost. Are you sure?')) {
        editor.clear();
    }
}

function addDirectionalLight() {
    var color = 0xffffff;
    var intensity = 1;
    const directionalLight: any = new THREE.DirectionalLight(color, intensity);
    directionalLight.position.set(5, 10, 5);
    editor.addObject(directionalLight)
}

function addAmbientLight() {
    var color = 0x222222;
    const ambientLight = new THREE.AmbientLight(color);
    editor.addObject(ambientLight)
}

function addSpotLight() {
    var color = 0xffffff;
    var intensity = 1;
    var distance = 0;
    var angle = Math.PI * 0.1;
    var penumbra = 0;
    const spotLight: any = new THREE.SpotLight(color, intensity, distance, angle, penumbra);
    spotLight.position.set(5, 10, 5);
    editor.addObject(spotLight)
}

</script>

<style lang="scss" scoped type="text/css">
.menubar {
    background: $theme_bg;
    width: 100%;
    height: $menubar_height;
    position: absolute;
    left: 0;
    top: 0;
}

.menuItem {
    color: #888;
    padding: 6px;
    cursor: pointer;
    position: relative;

    &:hover {
        background: #fff;
    }
}

.menuOptions {
    box-sizing: border-box;
    position: absolute;
    top: calc($menubar_height - 3px);
    left: 0;
    background: #eee;
    z-index: 1;

    .menuOption {
        min-width: 125px;
        color: #666;
        background-color: transparent;
        padding: 5px 10px;
        text-align: left;

        &:hover {
            cursor: pointer;
            background: $menuItem_hover;
            color: #fff;
        }
    }
}

.group {

    &::before {
        content: '';
        width: 100%;
        height: 1px;
        background: #ddd;
    }
}
</style>